<style scoped>
  .upload{
    width: 80px;
    height: 80px;
    line-height: 80px;
    display: block;
    background: #eee;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    overflow: hidden;
  }
  .upload input[type='file']{
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
  }
  .upload img{;
    width: 100%;
  }
</style>
<template>
  <span>
    <span class="upload" style="margin: 0 0 0 20px">
      <template v-if="!imgs">
        图片上传
      </template>
     <form method="post" :name="ids" enctype="multipart/form-data">
       <!--<input name="key" type="hidden" :value="key">-->
       <!--<input name="token" type="hidden" :value="token">-->
       <input name="file" @change="toUpload" type="file" accept="image/jpeg" capture="camera"/>
       <img v-if="imgs" :src="imgs" alt="">
     </form>
    </span>
  </span>
</template>

<script>
  import Vue from 'vue'
  import Message from 'vue-bulma-message'

  const MessageComponent = Vue.extend(Message)

  const openMessage = (propsData = {
    title: '',
    message: '',
    type: '',
    direction: '',
    duration: 1500,
    container: '.messages'
  }) => {
    return new MessageComponent({
      el: document.createElement('div'),
      propsData
    })
  }
  export default {
    name: 'upload',
    data () {
      return {
        key: '',
        token: '',
        paths: '',
        qnTime:'',
        img:''
      }
    },
    props: ['ids', 'path','imgs'],
    methods: {
      toUpload () {
        let vm = this
        let data = new FormData(document.forms.namedItem(vm.ids))
        let name = $('[name='+vm.ids+']').find('input').val().split('\\').pop()
        vm.$http.post('file/api/files?path='+encodeURIComponent(vm.path+'/'+name),data).then(function(res){
          vm.img = 'http://' + IMG_PATH + '/' + res.data.key
          vm.$emit('upload', {url: vm.img, ids: vm.ids})
        })
      },
      upload (){
        let vm = this
        vm.paths = $(event.currentTarget).val()

        let time = new Date().getTime()
        if (vm.qnTime == '' || vm.qnTime < time) {
          vm.$http.post('image/token', {}).then(function (data) {
            vm.token = data.body.result.token
            vm.qnTime = time + data.body.result.expires
            vm.todo()
          })
        } else {
          vm.todo()
        }
      },
      todo () {
        let vm = this, name = this.paths.split('\\').pop(), hash = parseInt(Math.random() * 100000000).toString();
        vm.key = vm.path + '/' + hash + name
        setTimeout(function () {
          let data = new FormData(document.forms.namedItem(vm.ids))
          $.ajax({
            type: 'POST',
            url: 'http://upload.qiniu.com/',
            data: data,
            processData: false,
            contentType: false,
            success: function (data) {
              let map = 'http://omwa8t3a0.bkt.clouddn.com/' + data.key + '?var=' + data.hash;
              openMessage({
                title: '提示',
                message: '上传成功',
                type: 'primary'
              })
              vm.$emit('upload', {url: map, code: 1})
            },
            error: function (xhr, type) {
              openMessage({
                title: '提示',
                message: '上传失败',
                type: 'primary'
              })
              vm.$emit('upload', {url: '', code: 1})
            }
          })
        }, 100)
      }
    },
    components: {},
    mounted() {
      this.$nextTick(function () {

      })
    },
    created() {

    }
  }
</script>
